<template>
    <view class="pageWrap">
        <view class="bj">
            <image style="width: 100%; height: 100%" :src="getImgUrl('/img/allImgs/rzimg/tixianBj.svg')" mode="" />
            <view class="money">可提现金额</view>
            <view class="detailMoney">{{ money }}<text class="unit">元</text></view>
            <view class="record" @click="goToRecord">提现记录</view>
        </view>

        <view class="canMoneyWrap">
            <view class="title">提现金额</view>
            <view class="detail">
                <text style="margin-right: 10rpx;">¥</text>
                <input type="number" style="width: 100%; font-size: 80rpx; height: 80rpx"/>
            </view>
            <view class="line"></view>
            <view class="detailContent">可提现¥{{ money }}</view>
        </view>
        <view class="canMoneyWrap">
            <view class="title">提现账户</view>
            <view class="way">
                <radio-group @change="rdChange" class="card_radio">
                    <view class="zf">
                        <view class="zfb">
                                <image class="zf_img" :src="getImgUrl('/img/missimg/zhifubao.png')" mode=""></image> <text class="zf_ft">支付宝</text>
                            </view>
                            <view class="xz">
                                <radio value="1" :checked="radioVls == '1'" color=" #FF7F22"  />
                            </view>
                        </view>
                        <view class="btn">
                            <view class="btn_box">
                                
                            </view>
                        </view>
                    <view class="zf">
                        <view class="zfb">
                            <image
                            class="zf_img"
                            :src="getImgUrl('/img/missimg/weixin.png')"
                            mode=""
                            ></image>
                            <text class="zf_ft">微信</text>
                        </view>
                        <view class="">
                            <radio value="2" :checked="radioVls == '2'" color=" #FF7F22" />
                        </view>
                    </view>
                </radio-group>
            </view>
        </view>

        <view class="btn">确认提现</view>
    </view>
</template>

<script>
import { getImgUrl } from '../../../utils/common'
    export default {
        data(){
            return{
                money:0,
                radioVls: 2,
            }
        },
        onLoad(options){
            this.money = options.money
        },
        methods: {
            getImgUrl,
             //选取提现方式
            rdChange(value) {
                console.log(value);
                this.radioVls = value.detail.value
            },
            // 跳转提现记录
            goToRecord(){
                uni.navigateTo({
                    url:'../../../subPackagesA/pages/withdrawRecord/withdrawRecord',
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
.btn{
    position: fixed;
    bottom: 30rpx;
    left: 30rpx;
    width: 690rpx;
    text-align: center; 
    background: #FF7F22;
    color: #fff;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
    border-radius: 8rpx;
}
.zf {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 0 40rpx 0;

      .zf_img {
        width: 48rpx;
        height: 48rpx;
        vertical-align: middle;
      }

      .zf_ft {
        margin-left: 20rpx;
      }
}
.line{
    width: 100%;
    height: 2rpx;
    background: #EBEBEB;
    margin-top: 20rpx;
}
.canMoneyWrap{
    margin-top: 30rpx;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .title{
        font-size: 34rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #333333;
    }
    .detail{
        margin-top: 60rpx;
        display: flex;
        align-items: baseline;
    }
    .detailContent{
        margin-top: 20rpx;
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #999999;
    }
}
.bj{
    width: 690rpx;
    height: 210rpx;
    position: relative;
    .unit{
        font-size: 28rpx;
    }
    .money{
        width: 128rpx;
        font-size: 26rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        position: absolute;
        top: 30rpx;
        left: 30rpx;
    }
    .detailMoney{
        font-size: 72rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
        position: absolute;
        top: 80rpx;
        left: 30rpx;
    }
    .record{
        width: 184rpx;
        height: 74rpx;
        line-height: 74rpx;
        text-align: center;
        border-radius: 24rpx 24rpx 24rpx 24rpx;
        opacity: 1;
        border: 2rpx solid #FFFFFF;
        position: absolute;
        top: 50%;
        right: 30rpx;
        margin-top: -37rpx;
        color: #fff;
    }
}
.pageWrap{
    padding: 30rpx;
}

</style>
<style>
page{
    background-color: #F5F5F5;
}
</style>